<template>
    <el-col :span="24">
      <el-pagination
        v-if="this.parames.totalCount && this.parames.totalCount > 0"
        style="text-align:center;margin-top:20px;float:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="parames.page"
        :page-sizes="getPageSizes"
        :page-size="getPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      ></el-pagination>
    </el-col>
</template>

<script>
export default {
    props: ['parames'],
    data() {
        return {

        };
    },
    computed: {
      changeStart () {
        return this.parames.page
      },
      pageTotal () {
        if (this.parames.totalCount && this.parames.limit) {
          return this.parames.totalCount
        }
      },
      getPageSizes () {
        if (this.parames.limits && this.parames.limits.length > 0) {
          let arry = []
          if (typeof this.parames.limits === 'string') {
            this.parames.limits.split(',').forEach(e=>{
              arry.push(Number(e))
            })
            return arry
          }
          return this.parames.limits
        } else {
          return [10,50,100,200]
        }
      },
      getPageSize () {
        if (this.parames.limit) {
          return this.parames.limit
        } else {
          return 10
        }
      }
    },
    methods: {
      handleCurrentChange (index) {
        this.parames.page = index
      },
      handleSizeChange (val) {
        this.parames.limit = val
        this.parames.page = 1
        this.$emit('render', this)
      }
    },
    watch: {
      changeStart: {
        handler (curVal, oldVal) {
          this.$emit('render',this)
        },
        deep: true
      }
    }
};
</script>

<style scoped>

</style>
